<template>
  <div class="belongQuestionBank">
    <a-select
      v-model="selectDefaultElem"
      placeholder="请选择所属题库"
      multiple
      @remove="handleRemove"
    >
      <a-option
        v-for="e in selectOptionElem"
        :key="e.id"
        :value="e.id"
        @click="handleInputChange(e.id)"
        >{{ e.title }}
      </a-option>
    </a-select>
  </div>
</template>

<script lang="ts" setup>
import { QuestionBankQuestionControllerService } from "../../../generated";
import { reactive, ref } from "vue";
import message from "@arco-design/web-vue/es/message";

const selectDefaultElem = ref([]);
const selectOptionElem = ref([]);
const form = reactive({
  id: "",
  title: "",
  content: "",
  tags: [],
  answer: "",
});

/**
 * 处理多选框的清除
 */
function handleRemove(questionBankId) {
  // console.log("删除题目id", form.id, "题库id", questionBankId);
  QuestionBankQuestionControllerService.deleteQuestionBankQuestionUsingPost({
    questionId: form.id,
    questionBankId: questionBankId,
  }).then((res) => {
    if (res.code === 0) {
      message.success("删除所属题库成功");
    } else {
      message.error("删除所属题库失败");
    }
  });
}

/**
 * 加载所属题库列表
 */
function getQuestionBankByQuestionId(questionId: string) {
  QuestionBankQuestionControllerService.getQuestionBankByQuestionIdUsingPost(
    questionId
  ).then((res) => {
    console.log("获取到的题库", res);
    selectDefaultElem.value.length = 0;
    for (const e of res.data) {
      selectDefaultElem.value.push(e.id);
    }
  });
}

/**
 * 处理多选框输入
 */
function handleInputChange(questionBankId: string) {
  // console.log("加题目id", form.id, "题库id", questionBankId);
  QuestionBankQuestionControllerService.addQuestionBankQuestionUsingPost({
    questionId: form.id,
    questionBankId: questionBankId,
  }).then((res) => {
    if (res.code === 0) {
      message.success("增加所属题库成功");
    } else {
      message.error("增加所属题库失败");
    }
  });
}
</script>
